/*!
 * Administrator Manage Central
 * All action entry of administrator's management.
 * @author	wangtd
 * @date	2015/8/4
 */

Ext.ns('Ext.framework');

Ext.framework = {
	title: {
		alert: 'Alert',
		confirm: 'Confirm',
		error: 'Error',
		message: 'Message'
	},
	config: {
		headerSize: 50,
		navigatorSize: 250,
		navigatorMinSize: 100,
		navigatorMaxSize: 500,
		containerSuffix: '-innerCt',
		containerSize: {width: 0, height: 0}
	},
	listener: {
		tab: 'home',
		fun: {},
		callback: function(func) {
			if (typeof(func) == 'function') {
				func(Ext.framework.config.containerSize.width, Ext.framework.config.containerSize.height);
			}
		}
	}
};
Ext.apply(Ext.framework, {
	header: Ext.create('Ext.panel.Panel', {
		region: 'north',
		height: Ext.framework.config.headerSize,
		baseCls: 'x-plain',
		border: false,
		margin: '0 0 5 0',
		tbar: Ext.create('Ext.toolbar.Toolbar', {
			height: Ext.framework.config.headerSize,
			defaults: {
				margin: '0 10 0 10'
			},
			baseCls: 'x-plain',
			items: [{
				xtype: 'panel',
				baseCls: 'x-plain',
				contentEl: '_framework_header'
			}, '->', {
				xtype: 'buttongroup',
				columns: 4,
				baseCls: 'x-plain',
				defaults: {
					//baseCls: 'x-plain',
					//margin: '0 0 0 15',
					scale: 'medium',
					style: 'color:black',
					listeners: {
						mouseover: function(btn) {
							btn.el.dom.style.background = '#add2ed';
							btn.el.dom.style.borderColor = '#add2ed';
						},
						mouseout: function(btn) {
							btn.el.dom.style.background = 'transparent';
							btn.el.dom.style.borderColor = 'transparent';
						},
						afterrender: function(btn) {
							btn.el.dom.style.background = 'transparent';
							btn.el.dom.style.borderColor = 'transparent';
							btn.btnInnerEl.dom.style.color = 'black';
						}
					}
				},
				items: [{
					tooltip: 'Settings',
					text: 'Settings',
					iconCls: 'IconSettings',
					handler: function() {}
				}, {
					tooltip: 'Help',
					text: 'Help',
					iconCls: 'IconHelp'
				}, {
					tooltip: 'About',
					text: 'About',
					iconCls: 'IconInfo'
				}, {
					tooltip: 'Exit',
					text: 'Exit',
					iconCls: 'IconPower',
					handler: function() {
						Ext.Msg.confirm(Ext.framework.title.confirm, 'Are you sure you want to exit the system?', function(btn) {
							if (btn == 'yes') {
								self.opener = null;
								self.open('','_self');
								self.close();
							}
						});
					}
				}]
			}]
		})
	}),
	navigator: Ext.create('Ext.tree.Panel', {
		region: 'west',
		title: 'Navigation',
		width: Ext.framework.config.navigatorSize,
		margin: '0 0 5 0',
		split: true,
		minWidth: Ext.framework.config.navigatorMinSize,
		maxWidth: Ext.framework.config.navigatorMaxSize,
		autoScroll: true,
		animate: true,
		collapsible: true,
	    //collapsed: true,
		collapseMode: 'mini',
		useArrows: true,
		tools: [{
			type: 'plus',
			tooltip: 'Open All',
			handler: function() {
				Ext.framework.navigator.expandAll();
			}
		}, {
			type: 'minus',
			tooltip: 'Close All',
			handler: function() {
				Ext.framework.navigator.collapseAll();
			}
		}],
		rootVisible: false,
		store: Ext.create('Ext.data.TreeStore', {
			root: {
				expanded: true,
				children: [{
					text: '框架网页',
					leaf: false,
					children: [{
						text: '框架主页',
						leaf: true,
						url: 'main.home.html'
					}]
				}]
			}
		}),
		listeners: {
			itemclick: function(tree, record, item, index, e) {
				e.preventDefault();
	            e.stopEvent();

				if (record.data['leaf']) {
					var tabCmpId = record.data['id'].replace(/\.|-/g, '_');
					var newTab = Ext.framework.container.getComponent(tabCmpId);

					if (!newTab) {
						newTab = Ext.create('Ext.container.Container', {
							id: tabCmpId,
							title: record.data['text'],
							iconCls: record.data['iconCls'],
							closable: true,
							closeAction: 'destory',
							loader: {
								listeners: {
									exception: function() {
										Ext.Msg.show({
											title: Ext.framework.title.error,
											msg: 'There are some errors happened when open tab!',
											modal: true,
											buttons: Ext.Msg.OK,
											icon: Ext.Msg.ERROR
										});
									}
								},
								renderer: function(loader, response, active) {
									var text = response.responseText;
									loader.getTarget().update(text, true);
									return true;
								},
								callback: function(loader, success, response, options) {},
								url: record.data['url'],
								scripts: true,
								autoLoad: true,
								loadMask: true
							},
							//html: '<iframe style="width:100%;height:100%" frameborder="0" src="' + record.data['url'] + '"/>',
							listeners: {
								close: function() {
									delete Ext.framework.listener.fun[tabCmpId];
								}
							}
						});

						Ext.framework.listener.tab = tabCmpId;
						Ext.framework.container.add(newTab);
					}

					if (newTab) {
						Ext.framework.container.setActiveTab(newTab);
					}
				}
			}
		}
	}),
	container: Ext.create('Ext.tab.Panel', {
		region: 'center',
		activeTab: 0,
		margin: '0 0 5 0',
		scrollable: false,
		plugins: [
		    Ext.create('Ext.ux.TabReorderer'),
		    Ext.create('Ext.ux.TabCloseMenu')
		],
		items: [{
			title: 'Home',
			iconCls: 'Home',
			reorderable: false,
	        //closable: true,
	        //closeAction: 'destory',
			//loader: {
			//	autoLoad: true,
			//	loadMask: true,
			//	url: 'home.html',
			//	scripts: true
			//},
			listeners: {
				close: function() {
					delete Ext.framework.listener.fun['home'];
				}
			}
		}],
		listeners: {
			tabchange: function(tab, newCard) {
				//Ext.framework.listener.callback(Ext.framework.listener.fun[newCard.getId()]);
				tab.fireEvent('resize', this, tab.getWidth(), tab.getHeight());
			},
			resize: function(tab, width, height) {
				Ext.framework.config.containerSize.width = width - 2;
				Ext.framework.config.containerSize.height = height - 38;
				Ext.framework.listener.callback(Ext.framework.listener.fun[tab.getActiveTab().getId()]);
			}
		}
	})
});


// Tab container which is used to load new tab page.
Ext.define('TabContainer', {
	extend: 'Ext.container.Container',
	border: false,
	initComponent: function() {
		var me = this;
		me.renderTo = Ext.framework.listener.tab + Ext.framework.config.containerSuffix;
		
		if (typeof(me.config.listeners.resize) == "function") {
			Ext.framework.listener.fun[Ext.framework.listener.tab] = me.config.listeners.resize;
		}
		
		this.callParent(arguments);
	},
	onResize: function() {
		if (this.hasListeners.resize) {
            this.fireEvent('resize', Ext.framework.config.containerSize.width, Ext.framework.config.containerSize.height);
        }
	}
});


// Load central viewport.
Ext.onReady(function() {
	Ext.create('Ext.container.Viewport', {
		layout: 'border',
		items: [
			Ext.framework.header,
			Ext.framework.navigator,
			Ext.framework.container
		]
	});
});